$namespace: mooc;
$panel-width: 240px;
@import "../../../../../scss/common/other";

.#{$namespace}-panel-container {
  margin: 0 auto;
  position: relative;
  height: 100%;
  z-index: 0;
  > div {
    top: 80px;
    width: 100%;
    position: absolute;
    z-index: 3;
  }

  .#{$namespace}-panel-component {
    margin-right: 1.5em;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    z-index: inherit;
    text-align: center;

    hgroup {
      color: #ffffff;
      h1 {
        margin: 0.375em 0;
        font-size: 38px;
        text-shadow: #222222 2px 2px;
        text-align: left;
      }

      span {
        font-size: 18px;
        color : #8C927E;
      }
    }

    .mask_operate{
      display: none;
    }

    img:hover + .mask_operate, .mask_operate:hover{
      display: block;
      position: absolute;
      border-radius: 50%;
      top : 0;
      left : 0;
      right: 0;
      bottom: 0;
      z-index: 1001;
      text-align: center;
    }

    .mask_operate:before{
      content: "";
      height :100%;
      display: inline-block;
      vertical-align: middle;
    }

    .op_mask{
      border-radius: 50%;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index : 1002;
      background-color: #000000;
      opacity: 0.6;
    }

    .op_btn{
      position: relative;
      z-index : 1003;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      line-height: 20px;
      width: 80px;
      border-radius: 4px;
      border: 1px solid #c7c7c7;
      padding: 5px 10px;
      font-size: 14px;
      cursor: pointer;

      background-color: #2277da;
      color: white;
    }


  }

  div {
    .#{$namespace}-setting {
      position: absolute;
      top: 0;
      font-size: 1.875em;
      color: rgba(0, 0, 0, 0.6);
    }
    .#{$namespace}-setting:hover {
      color: rgba(0, 0, 0, 0.8);
    }

    img.#{$namespace}-panel {
      position: relative;
      z-index: 1000;
      display: inline-block;
      width: $panel-width;
      height: $panel-width;
      //background: #ffffff url(../../../../../img/zhua_h.png) no-repeat 10px 20px;
      //background-size: 100% 100%;
      border-radius: 50%;
      @include box-shadow(3px, 3px, rgba(0, 0, 0, 0.4), 5px)
    }
  }
}